<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统布局说明</title>
		<link rel="stylesheet" href="../chapter2/bootstrap/css/bootstrap.min.css">
		<style>
			div[class=col] {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!-- 暂时的结论：
		 container中具体的格子数量是根据我们的内容宽度来进行自适应计算的
		 如果在一行当中放不下那么多列了，那么栅格系统会自动帮助我们换行-->
		<div class="container text-center">
		  <div class="row">
		<div class="col">
		      大周老师1
		    </div>
		    <div class="col">
		      大周老师2
		    </div>
		    <div class="col">
		      大周老师3
		    </div>
			<div class="col">
			  大周老师4
			</div>
			<div class="col">
			  大周老师5
			</div>
			<div class="col">
			  大周老师6
			</div>
			<div class="col">
			  大周老师7
			</div>
			<div class="col">
			  大周老师8
			</div>
			<div class="col">
			  大周老师9
			</div>
			<div class="col">
			  大周老师10
			</div>
			<div class="col">
			  大周老师11
			</div>
			<div class="col">
			  大周老师12
			</div>
			<div class="col">
			  Column13
			</div>
			<div class="col">
			  Column14
			</div>
			<div class="col">
			  Column15
			</div>
			<div class="col">
			  Column16
			</div>
			<div class="col">
			  Column17
			</div>
			<div class="col">
			  Column18
			</div>
			<div class="col">
			  Column19
			</div>
			<div class="col">
			  Column20
			</div>
			<div class="col">
			  21
			</div>
			
			<div class="col">
			  1
			</div>
			<div class="col">
			  2
			</div>
			<div class="col">
			  3
			</div>
			<div class="col">
			  4
			</div>
			<div class="col">
			  5
			</div>
			<div class="col">
			  6
			</div>
			<div class="col">
			  7
			</div>
			<div class="col">
			  8
			</div>
			<div class="col">
			  9
			</div>
			<div class="col">
			  10
			</div>
			<div class="col">
			  11
			</div>
			<div class="col">
			  12
			</div>
			<div class="col">
			  13
			</div>
			<div class="col">
			  14
			</div>
			<div class="col">
			  15
			</div>
			<div class="col">
			  16
			</div>
			<div class="col">
			  17
			</div>
			<div class="col">
			  18
			</div>
			<div class="col">
			  19
			</div>
			<div class="col">
			  20
			</div>
			<div class="col">
			  21
			</div>
		  </div>
		</div>
	</body>
</html>